import React from "react";
import Link from "umi/link";
import queryString from "query-string";

export const emptyParams = {
  taskName: "", // 任务名称
  modelName: "", // 模型名称
  appId: "", // 应用id
  busiId: "", // 业务id
  tenantId: "", // 租户id
  applyUserNames: [], // 处理人
  status: "", // 状态：正常-NORMAL,预警-WARNING,超期-TIMEOUT,终止-END,暂停-PAUSE, 撤销-RECALL, 错误-ERROR
  linkStatus: "", // 环节状态: 待处理-TODO 已处理-DONE
  operationInfo: {
    org:{},
    position:{},
    role:{},
    user:{},
  },
};

const buildKeyMap = (keys) =>
  keys.reduce((map, k) => {
    map[k] = true;
    return map;
  }, {});

export function renderLinkStatus(v) {
  switch (v) {
    case "TODO":
      return "待处理";
    case "DONE":
      return "已处理";
    default:
      return "";
  }
}
export function renderStatus(cn, v) {
  let color;
  let label;
  switch (v) {
    case "NORMAL":
      label = "正常";
      color = "#4dcb73";
      break;
    case "WARNING":
      label = "预警";
      color = "#ff9121";
      break;
    case "TIMEOUT":
      label = "超时";
      color = "#ff4948";
      break;
    case "END":
      label = "终止";
      color = "#bfbfbf";
      break;
    case "RECALL":
      label = "撤办";
      color = "#bfbfbf";
      break;
    case "PAUSE":
      label = "暂停";
      color = "#608eff";
      break;
    case "ERROR":
    default:
      label = "错误";
      color = "#d91923";
  }
  return (
    <span>
      <span className={cn} style={{ backgroundColor: color }} />
      <span>{label}</span>
    </span>
  );
}

export function getEllipsisCell(cn, v, maxWidth) {
  return (
    <span
      className={cn}
      style={{
        display: "inline-block",
        maxWidth,
      }}
      title={v}
    >
      {v}
    </span>
  );
}
export function getColumns() {
  const columns = [
    {
      title: "流程实例ID",
      dataIndex: "processInstanceId",
      render: (v) => this.getEllipsisCell(v, 100),
    },
    {
      title: "任务ID",
      dataIndex: "taskId",
      render: (v) => this.getEllipsisCell(v, 100),
    },
    {
      title: "任务名称",
      dataIndex: "taskName",
      render: (v) => this.getEllipsisCell(v, 79),
    },
    {
      title: "处理人",
      dataIndex: "operator",
      render: (v, data) => {
        // eslint-disable-next-line prefer-destructuring
        const operationInfo = data.operationInfo;
        if (operationInfo){
          // eslint-disable-next-line no-param-reassign
          const entries = Object.entries(operationInfo);
          let name = '';
          for (const entry of entries) {
            if (entry && entry.length>=1){
              const entr = Object.entries(entry[1]);
              if (entr && entr.length>=1){
                if (name !== ''){
                  name += '-';
                }
                // eslint-disable-next-line no-plusplus
                for (let i=0; i < entr.length; i++) {
                  name += entr[i][1];
                  if (entr.length > 1 && i!==entr.length-1){
                    name += ';';
                  }
                }
              }
            }
          }
          return this.getEllipsisCell(name, 90);
        }
        return this.getEllipsisCell(v, 90);
      },
    },
    {
      title: "发起时间",
      dataIndex: "createTime",
    },
    {
      title: "结束时间",
      dataIndex: "updateTime",
      render: (text, record) => {
        return (
          <span
            style={{
              display: "inline-block",
            }}
            title={text}
          >
            {record.linkStatus === 'DONE' ? text : ''}
          </span>
        )
      },
    },
    {
      title: "任务状态",
      dataIndex: "status",
      render: this.renderStatus,
    },
    {
      title: "任务环节",
      dataIndex: "linkStatus",
      render: renderLinkStatus,
    },
    /* {
      title: "流程单号",
      dataIndex: "serialNum",
      render: (v) => this.getEllipsisCell(v, 90),
    }, */
    {
      title: "流程名称",
      dataIndex: "modelName",
      render: (v) => this.getEllipsisCell(v, 79),
    },
    {
      title: "操作",
      dataIndex: "processInstanceId",
      render: (v) => {
        return (
          <div>
            <Link
              to={{
                pathname: "/flowmonitor/tasklist/detail",
                search: queryString.stringify({
                  processInstanceId: v,
                  // actype: this.processType,
                }),
              }}
            >
              详情
            </Link>
          </div>
        );
      },
    },
  ];
  return columns;
}
//
// 页码页数改变
export function handlePageChange(pageNum, pageSize) {
  this.setState({ page: { pageNum, pageSize } }, () => {
    this.initData();
  });
}

export function getRowSelectionProps(selectedRowKeys) {
  return {
    fixed: true,
    selectedRowKeys,
    onChange: (keys, rows) => {
      const selectedKeyMap = buildKeyMap(keys);
      const prevSelectedKeyMap = this.selectedProcesses.reduce((m, p) => {
        m[p.taskId] = true;
        return m;
      }, {});
      const newRows = rows.filter(
        (p) => !prevSelectedKeyMap[p.taskId],
      );
      this.selectedProcesses = this.selectedProcesses
        .filter((p) => selectedKeyMap[p.taskId])
        .concat(newRows);
      this.setState({ selectedTaskKeys: keys });
    },
    getCheckboxProps: record => ({
      disabled: !(record.status === 'NORMAL' && record.linkStatus === 'TODO'),
    }),
  };
}

export function getPageProps(current, pageSize, total) {
  return {
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: ["10", "20", "30", "40"],
    current,
    pageSize,
    total,
    onChange: this.handlePageChange,
    onShowSizeChange: this.handlePageChange,
  };
}

export function initData() {
  const { dispatch } = this.props;
  dispatch({
    type: "FlowMonitor/getTaskList",
    payload: {
      ...this.getQueryParam(),
    },
  });
}
